<template>
    <view-grid ref="grid"
               :columns="columns"
               :detail="detail"
               :editFormFields="editFormFields"
               :editFormOptions="editFormOptions"
               :searchFormFields="searchFormFields"
               :searchFormOptions="searchFormOptions"
               :table="table"
               :extend="extend">
    </view-grid>
</template> 
<script>
    import extend from "@/extension/custom/custom/Base_DealingsUnit.js";
    import { ref, defineComponent } from "vue";
    export default defineComponent({
        setup() {
            const table = ref({
                key: 'Id',
                footer: "Foots",
                cnName: '往来单位',
                name: 'custom/Base_DealingsUnit',
                url: "/DealingsUnit/",
                sortName: "CreateDate"
            });
            
        // 编辑表单字段
        const editFormFields = ref({
            "id": "",
            "dealingsUnitCode": "",  
            "dealingsUnitName": "",  
            "PartnerTypeName": "",  
            "createdTime":"",   
            "disabled": false
        });

        // 编辑表单布局和字段配置 
        const editFormOptions = ref([
            [
                { "title": "往来单位编号", "field": "dealingsUnitCode", "type": "text", "required": true },
                { "title": "往来单位名称", "field": "dealingsUnitName", "type": "text", "required": true },
            ],
            [
                { "title": "供应商", "field": "PartnerTypeName", "type": "text" },
                { "title": "建档日期", "field": "createdTime", "type": "text" },
            ],
            [
                { dataKey: "enable", data: [], title: "是否停用", field: "disabled", type: "radio", required: true }
            ]
        ]);
                    // 查询字段
        const searchFormFields = ref({
            "dealingsUnitCode": "",
            "dealingsUnitName": ""
        });
                    // 查询表单配置
        const searchFormOptions = ref
            ([[
                { "title": "往来单位编号或编码", "field": "dealingsUnitCode", "type": "like" },
                { "title": "往来单位名称", "field": "dealingsUnitName", "type": "like" }
            ]]);
                   // 表单字段定义
        const columns = ref
            ([
                { field: 'id', title: '往来单位主键ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
                { field: 'dealingsUnitCode', title: '往来单位编号', type: 'string', sort: true, width: 110, align: 'left', sort: true },
                { field: 'dealingsUnitName', title: '往来单位名称', type: 'string', sort: true, width: 110, require: true, align: 'left' },
                { field: 'partnerTypeName', title: '供应商', type: 'String', width: 110, align: 'left' },
                { field: 'createdTime', title: '建档日期', type: 'String', width: 110, align: 'left' },
                { field: 'disabled', title: '是否停用', type: 'boolean', bind: { key: 'enable', data: [] }, width: 110, require: true, align: 'left',  formatter: (row, column, value) => {return value ? "是" : "否";}},
            ]);

            
            const detail = ref({
                cnName: "#detailCnName",
                table: "#detailTable",
                columns: [],
                sortName: "",
                key: ""
            });
            return {
                table,
                extend,
                editFormFields,
                editFormOptions,
                searchFormFields,
                searchFormOptions,
                columns,
                detail,
            };
        },
    });
</script>
